<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            // 模拟一段搜索列表
            var his = [
                '小猪有两个眼睛',
                '小猪有两个耳朵',
                '小猪有一个嘴巴',
                '猪猪侠'
            ]
            // 获取元素
            var list = document.querySelector('.list')
            var text = document.querySelector('.text')
            // 添加鼠标抬起事件

            text.onkeyup = function () {

                // 获取输入的值
                var texts = text.value;
                // 过滤模拟数组，返回数组元素是否包含输入的文本
                var newList = his.filter(function (item) {
                    return item.includes(texts)
                })
                // 如果输入的长度为0，则newList是空数组
                if (texts.length === 0) newList = []

                // 每次渲染li标签之前，清空list
                list.innerHTML = ''



                // 通过newList渲染li标签
                for (var i = 0; i < newList.length; i++) {
                    // 创建li标签
                    var newLi = document.createElement('li')
                    // 赋值
                    newLi.innerHTML = newList[i]
                    list.appendChild(newLi)
                }
            }
        }

    </script>
</head>

<body>
    <input type="text" class="text">
    <ul class="list"></ul>
</body>

</html>